<!DOCTYPE html>
<html lang="en">
<head>
    <title>Truncation detector for ios</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
    <style type="text/css">
        body {
            font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
            font-size: 14px;
            line-height: 1.42857143;
            color: #333;
            background-color: #fff;
            box-sizing: border-box;
            margin: 0px;
        }
        .jumbotron {
            padding-top: 28px;
            padding-bottom: 28px;
            margin-bottom: 30px;
            color: inherit;
            background-color: #EEE;
        }
        .container {
            padding-right: 45px;
            padding-left: 45px;
            margin-right: auto;
            margin-left: auto;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .left {
            float: left;
            display: inline-block;
            position: relative;
        }
        .right {
            float: left;
            position: relative;
            left: 30px;
        }
        table {
            border: 1px solid #ddd;
            border-spacing: 0;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        .table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
            border: 1px solid #ddd;
            padding: 8px;
            vertical-align: top;
            border-top: 1px solid #ddd;
        }
        .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
            border-bottom-width: 2px;
        }
    </style>
</head>

<body>
    <div class="jumbotron">
        <div class="container">
            <div style="position: relative">
                <h1>Summary:</h1>
            </div>
            <div style="position: relative;left:50px;width:50%;">
                The Name of application: <strong>{{appName}}</strong><br>
                Test Time: <strong>{{date}}</strong><br>
                Issue nummber(s): <strong>{{number}}</strong>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="left">
            <div id="screen" style="border: 1px solid;display: inline-block;">
                <img id="pic" src="data:img/png;base64,{{screenshot}}"/>
            </div>
        </div>
        <div class="right">
                <table class="table-bordered">
                    <thead>
                        <th style="width: 20px;">ID</th>
                        <th>Snapshot</th>
                        <th style="min-width: 220px;">Content</th>                        
                        <th>Class Name</th>
                    </thead>
                    <tbody>
                        {{# each(views) }}
                        <tr><td>{{ @indexPlusOne }}</td><td><img src="data:img/png;base64,{{img}}"/></td><td>{{ content }}</td><td>{{ className }}</td></tr>
                        {{/}}
                    </tbody>
                </table>
        </div>
    </div>

    <!-- javascript -->
    <script>
    var format = function (str, col) {
        col = typeof col === 'object' ? col : Array.prototype.slice.call(arguments, 1);
        return str.replace(/\{(\w+)\}/g, function (m, n) {
            return col[n];
        });
    };
    var data={
        "appName": "{{appName}}",
        "orientation": "{{orientation}}",
        "full" : {
            "width": {{width}},
            "height": {{height}},
        },
        "views": [
        {{# views }}
        { "x": {{frameX}}, "y": {{frameY}}, "width": {{frameWidth}}, "height": {{frameHeight}} },
        {{/ views }}
        ]
    }
    var template="<div class=\"loc\" style=\"border: 1px dashed;display: inline-block;position: absolute;left: {0}px;top: {1}px;width: {2}px;height: {3}px;background-color: blue;opacity: 0.6;\"></div>";

    var createMask = function() {
        var imgWidth = $("#pic").width();
        var imgHeigh = $("#pic").height();
        $.each(data.views, function(i, obj) {
            var relatedX = (imgWidth * obj.x)/data.full.width;
            var relatedY = (imgHeigh * obj.y)/data.full.height;
            var relatedWidth = (imgWidth * obj.width)/data.full.width;
            var relatedHeight = (imgHeigh * obj.height)/data.full.height;
            $("#screen").append(format(template, relatedX, relatedY, relatedWidth, relatedHeight));
        });
        $(".loc").hide();
    }
    $("#screen").hover(function(){
        if ($(".loc").length == 0) {
            createMask();
        }
        if ($(".loc").is(":visible") == false)
            $(".loc").show();
    }, function(){
        if ($(".loc").length == 0) {
            createMask();
        }
        if ($(".loc").is(":visible") == true)
            $(".loc").hide();
    });
    </script>
</body>
</html>